<template>
    <layout title="我的店铺" :contentPadding="'0'">
        <div class="shop-top">
            <div class="shop-top-title text-tc">
                <span class="text-red font-size-32">靖诺优品商城</span>
                <span class="span-copy" @click="copyTextToClipboard('靖诺优品商城')">
                    <van-image width="2.933333vw" height="3.333333vw" fit="cover" lazy-load :src="copy" />
                </span>
            </div>
            <van-row>
                <van-col span="12">
                    <div class="text-tc">
                        <p class="text-title font-size-28">今日售出金额</p>
                        <p class="text-num font-size-40 text-red">￥0.00</p>
                    </div>
                </van-col>
                <van-col span="12">
                    <div class="text-tc">
                        <p class="text-title font-size-28">今日购买人数</p>
                        <p class="text-num font-size-40 text-red">0.00</p>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="shop-card">
            <van-row>
                <van-col span="8">
                    <div class="text-tc text-card">
                        <p class="text-title font-size-28">今日收益</p>
                        <p class="text-num font-size-30 text-red">0.00</p>
                    </div>
                </van-col>
                <van-col span="8">
                    <div class="text-tc text-card">
                        <p class="text-title font-size-28">已提货金额</p>
                        <p class="text-num font-size-30 text-red">0.00</p>
                    </div>
                </van-col>
                <van-col span="8">
                    <div class="text-tc text-card">
                        <p class="text-title font-size-28">总收益</p>
                        <p class="text-num font-size-30 text-red">121541.14</p>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="shop-navigation">
            <div class="shop-navigation-title">
                店长服务
            </div>
            <product-navigation :menuList="menuList" :columnNum="4" imagewidth="6vw" />
        </div>
    </layout>
</template>

<script setup>
import { ref, reactive } from 'vue';
import layout from '@/components/Layout/index.vue'
import ProductNavigation from '@/components/ProductNavigation/index.vue'
import copy from '@image/Cart/icon_01.png'
import { showToast } from "vant"

import user_01 from '@image/User/user_01.png'
import user_02 from '@image/User/user_02.png'
import user_03 from '@image/User/user_03.png'
import user_04 from '@image/User/user_04.png'
import user_05 from '@image/User/user_05.png'
import user_06 from '@image/User/user_06.png'
import user_07 from '@image/User/user_07.png'
import user_08 from '@image/User/user_08.png'


let menuList = ref([
    { text: '订单管理', path: '', image: user_01 },
    { text: '会员管理', path: '', image: user_02 },
    { text: '历史订单', path: '', image: user_03 },
    { text: '提货审核', path: '', image: user_04 },
    { text: '转场管理', path: '', image: user_05 },
    { text: '云仓管理', path: '', image: user_06 },
    { text: '在售订单', path: '', image: user_07 },
    { text: '公司申请', path: '', image: user_08 },
])
let copyTextToClipboard = (text, name) => {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
            showToast('提示内容');
        }).catch(err => {
            showToast('错误信息');
        });
    } else {
        showToast('错误信息3333');
    }
}

</script>

<style lang="scss" scoped>
.shop-top{height: 290px;background-color: var(--white);border-radius:0 0 40px 40px ;}
.shop-top-title{
    padding: 20px;
}
.span-copy{padding: 0 40px 0 20px;vertical-align: middle;}
.text-title{padding: 15px 0;}
.text-num{padding: 20px  0;}
.shop-card{margin: 0 20px; height: 156px;background: linear-gradient(to right, #FFE8E8,#D2E2FB);margin-top: -80px;border-radius: 5px;padding: 0 10px;
    .text-title{margin-top: 20px;}
    .text-num { padding: 10px 0; }
}
.shop-navigation{margin: 20px; background-color: #fff;padding: 20px;border-radius: 10px;}
.shop-navigation-title{padding: 10px 0;}
</style>